<!--
 * @Description: 
 * @Author: lzp
 * @Date: 2021-03-22 14:18:46
 * @LastEditTime: 2021-03-22 14:58:57
 * @LastEditors: xxx
-->
<template>
  <div class="contact">
    <div class="contact-container">
      <!-- 搜索 -->
      <div id="contact-search" @tap="getFocus" class="contact-search">
        <i class="jeicon jeicon-search" />
        搜索
      </div>
      <!-- 过滤 
      <ul id="contact-filter" v-show="!isFromContact" class="contact-filter">
        <li @tap="handleFilter(1)">
          <div>
            <i :class="{'contact-filter-active':selFilter===1}" class="jeicon jeicon-service" />
          </div>
          <span :class="{'contact-filter-active':selFilter===1}">公司同事</span>
        </li>
        <li @tap="handleFilter(2)">
          <div>
            <i :class="{'contact-filter-active':selFilter===2}" class="jeicon jeicon-comment-o" />
          </div>
          <span :class="{'contact-filter-active':selFilter===2}">讨论组</span>
        </li>
      </ul>-->

      <!-- 公司 -->
      <template v-if="selFilter===1">
        <company :companyTop="companyTop" :showChecked="isFromContact" @receivData="receivData" />
      </template>
      <!-- 讨论组
      <template v-if="selFilter===2">
        <ul :style="'top:' + companyTop + 'px'" class="contact-group">
          <li v-for="(groupItem,index) of groupList" :key="'group'+index" @tap="goChat(groupItem)">
            <span class="info-avatar">
              <template v-if="groupItem.photo">
                <img :src="groupItem.photo" alt srcset />
              </template>
              <template v-else>群组</template>
            </span>
            <span class="group-title">{{ groupItem.name }}</span>
          </li>
        </ul>
      </template>
       -->
    </div>
  </div>
</template>
<script>
import Group from './class/Group'
import Dialog from './class/Dialog'
import { openWindow } from '../../helper'
import Company from './components/company/index'

export default {
  name: 'Lanuch',
  components: {
    Company,
  },
  data() {
    return {
      selFilter: 1,
      groupList: [],
      selectedData: [],
      companyTop: 0, // 筛选条件距离顶部的位置。动态获取
      isFromContact: false, // 入口否是通讯录
    }
  },
  computed: {
    userId() {
      return JE.getCurrentUser().id
    },
  },
  created() {
    // const currentWeb = plus.webview.currentWebview()
    // if (currentWeb.type === 'contact') {
      this.isFromContact = false
    // } else if (currentWeb.type === 'createGroup') {
    //   this.isFromContact = true
    // // }
    // currentWeb.setStyle({
    //   titleNView: {
    //     backgroundColor: '#536DFE',
    //     titleText: '通讯录',//currentWeb.type === 'createGroup' ? '创建讨论组' : 
    //     titleColor: '#fff',
    //     autoBackButton: true,
    //   },
    // })
  },
  async mounted() {
    window.addEventListener('launchMui', async (data) => {
      await this.getGroup()
    })
    this.$nextTick(() => {
      const searchHeight = document.getElementById('contact-search')
        .offsetHeight
      const contactHeight = document.getElementById('contact-filter')
        .offsetHeight
      if (this.isFromContact) {
        this.companyTop = searchHeight + contactHeight + 20
      } else {
        this.companyTop = searchHeight + contactHeight + 30
      }
    })
  },
  methods: {
    receivData(data) {
      this.selectedData = data
    },
    getFocus() {
      openWindow({
        url: this.isFromContact
          ? 'pages_search_index.html'
          : 'pages_searchIndex_index.html',
        id: '_searchResult',
        title: '',
        extras: {
          type: this.isFromContact ? 'createGroup' : 'contact',
          selectedData: this.selectedData,
        },
        hideNView: true,
      })
    },
    // 过滤
    handleFilter(type) {
      this.selFilter = type
      switch (type) {
        case 1:
          break
        case 2:
          this.getGroup()
          break
        default:
          break
      }
    },
    // 查询讨论组
    async getGroup() {
      this.groupList = await Group.getGroupList(this.userId)
      this.groupList.map((item) => {
        if (item.name && item.name.length > 13) {
          item.name = `${item.name.substr(0, 13)}...`
        }
        item.photo = item.photo && JE.getFileUrl(item.photo, 'preview')
      })
    },
    async goChat(item) {
      if (item.id) {
        const resObj = await Dialog.createGroupChat(
          item.id,
          JE.getCurrentUser().id,
          item
        )
        const targetWebview = plus.webview.getWebviewById('JE-PLUGIN-IM')
        mui.fire(targetWebview, 'createdGroup', resObj)
      }
    },
  },
}
</script>
<style lang="less" >
.contact {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  overflow: hidden;
  background-color: #f2f2f2;

  .contact-container {
    width: 97.6%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    // overflow-y: auto;
    left: 5px;
    -webkit-overflow-scrolling: touch;
    .contact-search {
      width: 100%;
      height: 60px;
      background: #ffffff;
      border-radius: 30px;
      margin-top: 10px;
      vertical-align: middle;
      line-height: 60px;
      font-size: 32px;
      color: #bebebe;
      .jeicon {
        font-size: 32px;
        color: #bebebe;
      }
      .jeicon-search {
        margin: 0 5px 0 20px;
      }
    }
    .contact-filter {
      border-radius: 16px;
      background: #ffffff;
      height: 160px;
      margin: 10px auto;
      display: flex;
      align-items: center;
      justify-content: center;
      .contact-filter-active {
        color: #536dfe;
      }
      li {
        flex: 1;
        height: 160px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        div {
          margin-bottom: 16px;
          i {
            font-size: 42px;
            color: #a9aba9;
          }
        }
        span {
          font-size: 28px;
          color: #a9aba9;
        }
      }
    }
    .common {
      height: 100px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #f5f5f5;
      img {
        width: 70px;
        height: 70px;
        border-radius: 70px;
      }
      span {
        padding-left: 10px;
        font-size: 32px;
        color: #3f3f3f;
      }
    }

    .contact-company {
      border-top-left-radius: 16px;
      border-top-right-radius: 16px;
      background: #ffffff;
      overflow: hidden;
      .company-bar {
        height: 100px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #f5f5f5;
        .company-bar-name {
          display: flex;
          align-items: center;
          i {
            font-size: 28px;
            color: #536dfe;
          }
          span {
            margin-left: 4px;
            font-size: 28px;
            color: #a9aba9;
          }
        }
        .company-bar-change {
          display: flex;
          align-items: center;
          min-width: 100px;
          margin-left: 20px;
          i {
            font-size: 26px;
            color: #536dfe;
          }
          span {
            margin-left: 8px;
            font-size: 28px;
            color: #3f3f3f;
          }
        }
      }
      .company-list {
        .list-item-employee {
          .common;
        }
        .list-item-dept {
          .common;
          justify-content: space-between;
          a {
            font-size: 32px;
            color: #3f3f3f;
          }
          i {
            font-size: 30px;
            color: #a9aba9;
          }
        }
      }
      .company-check-list {
        height: 100px;
        border-bottom: 1px solid #f5f5f5;
        width: 100%;
        display: flex;
        align-items: center;
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        li {
          padding-right: 12px;
          font-size: 28px;
          color: #3f3f3f;
          margin-right: 12px;
          display: inline-block;
          position: relative;
          &:first-child {
            color: #536dfe;
          }
          &:not(:last-child)::after {
            content: ' ';
            position: absolute;
            height: 18px;
            width: 18px;
            border-width: 1.2px 1.2px 0 0;
            border-color: #bebebe;
            border-style: solid;
            transform: rotate(45deg);
            margin-top: 5px;
          }
          &:last-child {
            padding-right: 100px;
          }
        }
      }
    }

    .contact-user {
      background: #ffffff;
      margin: 0 10px;
      border-top-left-radius: 16px;
      border-top-right-radius: 16px;
      .user-char {
        background-color: #f2f2f2;
        height: 24px;
        line-height: 24px;
        font-size: 24px;
        padding-left: 20px;
        color: #bebebe;
      }
      .user-item {
        padding-right: 24px;
        justify-content: space-between;
        .common;
        .user-item-name {
          display: flex;
          padding-left: 20px;
          align-items: center;
        }
        .user-item-dept {
          font-size: 28px;
          color: #a9aba9;
          margin-right: 30px;
        }
        .user-item-added {
          color: #a9aba9;
          font-size: 28px;
          margin-right: 30px;
        }
        .user-item-add {
          margin-right: 30px;
          width: 84px;
          height: 40px;
          display: flex;
          align-items: center;
          border-radius: 4px;
          border: 1px solid #536dfe;
          span {
            font-size: 24px;
            color: #536dfe;
          }
        }
      }
    }

    .contract-chart {
      display: none;
      position: fixed;
      right: 30px;
      top: 555px;
      .chart-item {
        margin-bottom: 2px;
        text-align: center;
        width: 24px;
        height: 24px;
        line-height: 24px;
        a {
          font-size: 18px;
          color: #bebebe;
        }
      }
      .sel-chart-item {
        background: #536dfe;
        color: #ffffff;
        border-radius: 24px;
        a {
          font-size: 18px;
          color: #ffffff;
        }
      }
    }

    .contact-group {
      border-top-left-radius: 16px;
      border-top-right-radius: 16px;
      // margin: 0 10px;
      position: absolute;
      bottom: 0;
      width: 100%;
      padding: 0 20px;
      background: #ffffff;
      overflow-x: hidden;
      overflow-y: scroll;
      li {
        border-bottom: 1px solid #f5f5f5;
        height: 100px;
        display: flex;
        // justify-content:space-between;
        align-items: center;
        .info-avatar {
          width: 70px !important;
          height: 70px !important;
          display: block;
          background: #536dfe;
          border-radius: 50%;
          text-align: center;
          line-height: 70px;
          font-size: 24px;
          color: #fff;
          overflow: hidden;
        }
        .group-title {
          margin-left: 10px;
          font-size: 30px;
          color: #3f3f3f;
          max-width: 64%;
          display: block;
          line-height: 100px;
          overflow: hidden;
          text-overflow: ellipsis; /*文字隐藏后添加省略号*/
          white-space: nowrap; /*强制不换行*/
        }
      }
    }

    .contact-service {
      border-top-left-radius: 16px;
      border-top-right-radius: 16px;
      margin: 0 10px;
      background: #ffffff;
      .service-item {
        height: 100px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 20px;
        border-bottom: 1px solid #f5f5f5;
        &:last-child {
          border-bottom: 0;
        }
        .item-wrapper {
          align-items: center;
          display: flex;
          .service-icon {
            width: 44px;
            height: 44px;
            border-radius: 44px;
            margin-right: 14px;
          }
          .service-name {
            font-size: 34px;
            color: #3f3f3f;
          }
        }
        .service-msg {
          width: 68px;
          height: 36px;
          line-height: 36px;
          background: #fa4444;
          border-radius: 20px;
          text-align: center;
          span {
            font-size: 24px;
            color: #ffffff;
          }
        }
      }
    }
  }
}
</style>